<template>
    <div class="app-container">
        <wms-form v-model:query-params="queryParams" :form-list="formList" @query="getList" label-width="88px"
            @export="handleExport">
            <el-col :span="1.5">
                <el-button type="success" plain icon="Setting" :disabled="multiple" @click="workOrderOut"
                    v-hasPermi="['wms:obMaster:workOrderOut']">工单发料
                </el-button>
            </el-col>
        </wms-form>

        <wms-table class="table-click" :loading="loading" :data-list="obMasterList" :column="column"
            :pageInfo="queryParams" @get-list="getList" @selection-change="selectionChange"
            @row-click="handleRowClick" />
        <ob-details v-if="showDetail" v-model="showDetail" :master-info="masterInfo" />
    </div>
</template>

<script setup name="obMasterProd">
import WmsTable from '@/components/WmsTable/index.vue'
import WmsForm from '@/components/WmsForm/index.vue'
import ObDetails from '../obDetails/index.vue'
import { ElMessage } from 'element-plus'
import { data, column, formList } from './index.js'
import { listObMaster, orderOut } from "@/api/wms/obMaster";
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import userUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance();
const userStore = userUserStore()
const queryParams = reactive(data.queryParams);
const obMasterList = ref([]);
const obDetailList = ref([]);
const selectedMasters = ref([]);
const loading = ref(true);

let showDetail = ref(false)
let masterInfo = ref({
    obMasterId: null,
    workOrderNo: null
})

let procParams = reactive({
    obMasterIds: [],
    stationNo: null,
    creator: null
})


const multiple = computed(() => !selectedMasters.value.length)

// 使用watch监听selectedMasters的变化,自动同步所选ids
watch(selectedMasters, (newSelectedMasters) => {
    procParams.obMasterIds = newSelectedMasters.map(item => item.obMasterId)
    console.log("选中的工单:", procParams.obMasterIds);
}, {
    deep: true,
    immediate: true
})

/** 查询生产出库单列表 */
function getList() {
    loading.value = true;
    queryParams.obMasterType = 'MES_ORDER_OUT'
    listObMaster(proxy.addDateRange(queryParams, queryParams.dateRange)).then(response => {
        obMasterList.value = response.rows;
        queryParams.total = response.total;
        loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    dateRange.value.dateRange = [];
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download('wms/oBmaster/export', {
        ...queryParams
    }, `oBmaster_${new Date().getTime()}.xlsx`)
}

// 多选框选中数据
function selectionChange(selection) {
    console.log("叫料工单页面选中的数据:", selection);
    selectedMasters.value = selection;
}


function workOrderOut() {
    proxy.$modal.confirm(`确认要对所选工单【${procParams.obMasterIds}】进行【出库发料】操作吗?`).then(function () {
        // 操作接口
        procParams.creator = userStore.id
        orderOut(procParams).then(response => {
            proxy.$modal.msgSuccess(response.msg);
            getList();
        }).catch(error => { });
    });
}

const handleRowClick = (row) => {
    showDetail.value = true
    masterInfo.value.obMasterId = row.obMasterId
    masterInfo.value.obMasterNo = row.obMasterNo
    masterInfo.value.workOrderNo = row.workOrderNo
}
getList();
</script>
